Estoy tratando de convertir algo de CSS simple a SCSS para poder aprovechar el anidamiento. El siguiente código es un ejemplo de dónde quiero definir estilos para un montón de tipos de entrada de campos de formulario. En el CSS simple a continuación, estoy configurando el valor predeterminado, además del estado de :focus de los campos. Excepto por un campo de formulario en particular (un campo de búsqueda en mi encabezado global), donde estoy usando el selector de pseudoclase :not negation.

 input.text, input.title, input[type=email], input[type=password], input[type=tel], input[type=text], select, textarea { border: 2px solid #c3cbd6; } input.text:focus, input.title:focus, input[type=email]:focus, input[type=password]:focus, input[type=tel]:focus, input[type=text]:not(div.global-search > form > div > input.et_pb_s):focus, select:focus, textarea:focus { border: 2px solid #008ed4; }

Y aquí está mi conversión a SCSS anidado para el primer bloque:

 input.text, input.title, input[type=email], input[type=password], input[type=tel], input[type=text], select, textarea { border: 2px solid #c3cbd6; &:focus { border: 2px solid #008ed4; } }

Pero el segundo bloque CSS es más complicado de convertir a SCSS, porque estoy haciendo una excepción usando el selector :not para excluir el campo de búsqueda de tener un estado de enfoque como todos los demás formularios.

¿Cómo puedo hacer esto en SCSS?